<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块元素</title>
</head>
<body>
    <h1>块元素</h1>
    <h2>分类</h2>
    <p>
        行内块元素和块元素
    </p>
    <h2>块元素</h2>
    <p>
        div是最常用的块元素
        <ol>
            <li>块元素独占一行 设置宽高有效</li>
            <li>块元素可以嵌套其他元素</li>
        </ol>
        常用的块元素：列表 表格 p div h1~h6
    </p>
    <hr>
    <h2>行内元素</h2>
    <p>
        span是最常用的元素
        <ol>
            <li>内联元素不独占一行 设置宽高无效</li>
            <li>内联元素不可以嵌套其他元素</li>

        </ol>
        常用的内联元素：单标签 span a 
        <hr>
        <div style="border: 1px red solid;
        width: 100px;
        height: 100px;">hello</div>
        <span style="border: 1px red solid;
        width: 100px;
        height: 100px;">world</span>
    </p>
    <div></div>
</body>
</html>